<template>

  <div>
    <el-dialog title="筛选者档案" :visible.sync="editDialogVisible" :close-on-click-modal="false" :before-close="closeDialog" v-on:open="loadData" style="margin-top: -50px">
      <el-form :model="form" :inline="true" :rules="rules" ref="form" label-width="100px">
        <el-tabs v-model="activeName" @tab-click="tabClick">
          <el-tab-pane label="筛选者档案" name="first">
            <div>
              <el-row>
                <el-col>
                  <el-form-item label="姓名：" prop="name" label-width="50px">
                    {{form.name}}
                  </el-form-item>
                  <el-form-item label="性别：" prop="sex" labelWidth="50px">
                    {{form.sex}}
                  </el-form-item>
                  <el-form-item label="身份证号：" prop="cardid" labelWidth="70px">
                    {{form.cardid}}
                  </el-form-item>
                  <el-form-item label="年龄："labelWidth="50px">
                    {{form.age}}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="筛选号" prop="subjectsNum">
                <el-input v-model="form.num"
                          :readonly="form.num!=undefined&&form.num!=''"></el-input>
              </el-form-item>
              <el-form-item label="招募日期" prop="recruitDate">
                <el-date-picker
                  v-model="form.recruitDate"
                  type="date"
                  placeholder="选择日期"
                  :readonly="true"
                  :picker-options="pickerOptions0">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="联系电话" prop="mobile">
                <el-input v-model="form.mobile"></el-input>
              </el-form-item>
              <el-form-item label="联系地址" prop="address">
                <el-input v-model="form.address"></el-input>
              </el-form-item>
              <el-form-item label="紧急联系人" prop="urgentContact">
                <el-input v-model="form.urgentContact"></el-input>
              </el-form-item>
              <el-form-item label="紧急联系电话" prop="urgentMobile">
                <el-input v-model="form.urgentMobile"></el-input>
              </el-form-item>
            </div>

          </el-tab-pane>
          <el-tab-pane label="参与项目" name="third">
            <el-form :model="form" :inline="true" :rules="rules" ref="form" label-width="120px" class="demo-form">
              <el-form-item style="width: 100%">项目名称：{{form.projectName}}</el-form-item>
              <el-form-item label="筛选号" prop="num" style="width: 40%">{{form.num}}</el-form-item>
              <el-form-item label="招募日期" prop="recruitDate" style="width: 40%"></el-form-item>
              <el-form-item label="筛选结果" prop="candidateResult" style="width: 40%">
                {{candidateResult[form.candidateResult]}}
              </el-form-item>
              <!--<el-form-item label="受试者号" prop="subjectsNum" style="width: 40%">{{form.subjectsNum}}</el-form-item>-->
              <el-form-item label="随机号" prop="randomNum" style="width: 40%">{{form.randomNum}}</el-form-item>
              <el-form-item label="住院状态" prop="hospitalStatus" style="width: 40%">
                -
              </el-form-item>
              <el-form-item label="试验状态" prop="status" style="width: 40%">
                -
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
        <el-row>
          <el-col :span="24" style="padding:10px;">
            <span style="color:red;float:left;">"*"为必填项。</span>
            <div class="pull-right">
          <el-button v-if="$utils.ckUIPower('S01010101')" type="primary" @click.native.prevent="handleSubmit" :disabled="editClick">保存
          </el-button>
          <el-button v-if="$utils.ckUIPower('S01010101')" @click.native.prevent="handleReset">重置</el-button>
          <el-button @click.native.prevent="closeDialog">取消</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import http from '../../../api/http'
  var model = {
    num: '',
    sex: '',
    mobile: '',
    address: '',
    urgentContact: '',
    urgentMobile: '',
    fingerprint: '',
    finger: '',
    name: '',
    cardid: '',//
    randomNum: '',
    candidateNum: '',
    testStatus: '',
    hospitalStatus: '',
    passTime: '',
    age: '',
  };
  export default {
    data () {
      return {
        editClick:false,
        picHead: '',
        activeName: 'first',
        projectName: '',
        pickerOptions0: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
        title: '',
        form: Object.assign({}, model),
        rules: {},                  //校验规则
        informationList: [],        //存储受试者详细信息
        addBtnTxt: '',
        siteList: [],
        read: false,
        candidateResult:['-','成功','失败']
      }
    },
    props: {
      editDialogVisible: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      //点击对应标签时加载
      tabClick(tab){
        switch (tab.name) {
          case 'first':
            break;
          case 'second':
            break;
          case 'third':
            break;
        }
      },
      readID() {
        this.read = true;
      },
      handleReset () {
        this.$refs.form.resetFields();
        this.editClick = false;
        this.form.age = null;
        this.form.num = null;
      },
      handleSubmit (ev) {
        var vm = this;
        this.$refs.form.validate(function (valid) {
          if (valid) {
            vm.editClick = true;
            var roleIds = vm.form.roleIds;
            if (roleIds != undefined && roleIds.length > 0) {
              vm.form.roleName = "";
              vm.roleList.forEach(function (r) {
                if (roleIds.indexOf(r.id) >= 0) {
                  vm.form.roleName += " " + r.name;
                }
              });
            } else {
              vm.form.roleName = "";
            }
            http.postData(vm, "/pt/candidateSubjects/save", {json: JSON.stringify(vm.form)}, function (resp) {
              var ret = resp.body;
              if (ret.code === '111') {
                vm.$notify({title: '操作提示', message: ret.msg, type: 'success'});
                vm.form = Object.assign({}, model);
                vm.closeDialog();
                vm.$parent.onSubmit();
              } else {
                vm.editClick = false;
                vm.$notify.error({title: '操作失败', message: ret.msg});
              }
            });
          } else {
            return false
          }
        })
      }, closeDialog(){
        this.editClick = false;
        this.$emit('closeEditDialog');
        this.form = {};
      },
      loadData(){
        var vm = this;
        if (vm.$parent.currentCandidateID != undefined && vm.$parent.currentCandidateID != '') {
          http.postData(vm, "/pt/candidateSubjects/detail/" + vm.$parent.currentCandidateID, {}, function (resp) {
            var ret = resp.body;
            if(ret.code == 111){
              vm.form = ret.value;
            }
          });
        }
      }
    },
  }
</script>
<style>
  .readID {
    width: 70%;
    height: 100px;
    border-radius: 6px;
    border: 2px solid #ccc;
    margin: auto;
    font-size: 26px;
    font-weight: bold;
    color: #cccccc;
    text-align: center;
    line-height: 100px;
    cursor: pointer;
    margin-bottom: 20px;
  }

  .title {
    width: 100px;
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #444444;
  }

  .wrapper {
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 4px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
</style>
